<div id="outline">
    <div class="addgen">
        <!-- 可让用户添加pid为0的节点，，根节点 -->
        <el-button @click="genOutline(data)" type="primary" size="mini">创建答案种类</el-button>
    </div>
    <!-- default-expand-all全部显示 -->
    <el-tree  :data="data" :props="defaultProps" draggable @node-drop="drop">
        <span @mouseover="data.flag=true" @mouseout="data.flag=false" slot-scope="{ node, data }">
            {{data.text}}
            <span v-show="data.flag">
                <el-button type="text" @click="editOptions(data)">
                    <i class="el-icon-edit"></i>编辑选项</el-button>
                <el-button v-show="data.children.length!=0"  type="text" @click.stop="addOptions(data)">
                    <i class="el-icon-plus"></i>添加选项</el-button>
                <el-button v-show="data.children.length==0" type="text" @click.stop="delOptions(node,data)">
                    <i class="el-icon-remove-outline"></i>删除选项</el-button>
            </span>
        </span>
    </el-tree>
</div>


<script>
    new Vue({
        el: '#outline',
        data: function () {
            return {
                data: [],
                defaultProps: {
                    children: 'children',
                    label: 'text'
                }
            }
        },
        created: function () {
            var _this = this
            $.get('/item', function (result) {
                if (result.error != 0) { return }
                _this.data = result.data
                console.log(_this.data)
            })
        },
        methods: {
            // 拖拽排序..element中有拖拽事件
            // 自己本身的标签，紧挨着的标签，方向
            drop: function (node1, node2, pos) {
                console.log(node1)
                console.log(node2)
                console.log(pos)
                var id = node1.data.id
                // 如果向前拖拽
                if (pos == 'before') {
                    //prenode 找自己的上个节点的上个节点
                    if (node2.previousSibling.previousSibling) {
                        var prenode = node2.previousSibling.previousSibling
                        presort = prenode.data.sort
                    } else {
                        presort = node2.data.sort - 0.1
                    }
                    $.post('/item/sort', {
                        id: id,
                        pid: node2.data.pid,
                        sort: (presort + node2.data.sort) / 2
                    }, function (result) {
                        if (result.error != 0) return
                    })
                } else if (pos == 'after') {
                    // 向后拖拽
                    //看层级是否改变,判断是否拖拽向了内部
                    if (node2.level != node1.level) {
                        var pid = node2.data.pid
                    } else {
                        var pid = node1.data.pid
                    }
                    if (node2.nextSibling.nextSibling) {
                        var nextnode = node2.nextSibling.nextSibling
                        nextsort = nextnode.data.sort
                    } else {
                        nextsort = node2.data.sort + 0.01
                    }
                    $.post('/item/sort', {
                        id: id,
                        pid: node2.data.pid,
                        sort: (nextsort + node2.data.sort) / 2
                    }, function (result) {
                        if (result.error != 0) return
                    })
                } else {
                    $.post('/item/sort', {
                        id: id,
                        pid: node2.data.id,
                        sort: 0
                    }, function (result) {
                        if (result.error != 0) return
                    })
                }
            },
            // 编辑选项
            editOptions: function (data) {
                var _this = this
                this.$prompt('请输入内容', '编辑节点', {
                    inputPattern: /^.+$/,
                    inputErrorMessage: '内容不能为空',
                    inputValue: data.text,
                    callback: function (action, obj) {
                        if (action != 'confirm') { return }
                        $.post("/item/edit", {
                            // 需要传入后台的两个参数
                            id: data.id,
                            text: obj.inputValue,
                        }, function (result) {
                            if (result.error != 0) { return }
                            _this.$set(data, 'text', obj.inputValu)
                        })
                    }
                })
            },
            //删除节点
            delOptions: function (node, data) {
                this.$confirm('删除后不能恢复', '删除', {
                    callback: function (action) {
                        if (action == 'confirm') {
                            $.get('/item/del', { id: data.id }, function (result) {
                                if (result.error != 0) return
                                const parent = node.parent;
                                children = parent.data.children || parent.data;
                                var index = children.findIndex(function (value) {
                                    return value.id == data.id
                                })
                                children.splice(index, 1)
                            })
                        }
                    }
                })
            },
            //添加选项
            addOptions: function (data) {
                var _this = this
                this.$prompt('请输入内容', '添加子节点', {
                    inputPattern: /^.+$/,
                    inputErrorMessage: '内容不能为空',
                    callback: function (action, obj) {
                        if (action != 'confirm') { return }
                        $.post('/item/add', {
                            text: obj.inputValue,
                            pid: data.id,
                        }, function (result) {
                            if (result.error !== 0) { return }
                            data.children.push({
                                text: obj.inputValue,
                                children: [],
                                id: result.id,
                                pid: data.id,
                                flag: false,
                            })
                        })
                    }
                })
            },
            //添加选项种类
            genOutline: function (data) {
                var _this = this
                this.$prompt('请输入内容', '添加根节点', {
                    inputPattern: /^.+$/,
                    inputErrorMessage: '内容不能为空',
                    callback: function (action, obj) {
                        if (action != 'confirm') { return }
                        $.post('/item/add', {
                            text: obj.inputValue,
                            pid: 0,
                        }, function (result) {
                            if (result.error !== 0) { return }
                            data.push({
                                text: obj.inputValue,
                                children: [],
                                id: result.id,
                                pid: 0,
                                flag: false,
                            })
                        })
                    }
                })
            },
        }
    })

</script>